<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

      <!-- 

        例子1：v-bind的基础使用场景
        需求：让img标签中src属性的值，随着data中的imgUrl值的改变而改变
        分析：
              ①处：模板中原始的属性和属性值，其中属性值默认为字符串的格式，与实际需求不符
              ②处：由v-bind的指令作用可知，此时的src的右边为插值语法区域，故而imgUrl会当作一个变量，且它的值刚好可以通过vm的实例直接获取
        解决：在src前添加一个v-bind的即可。

       -->
       
      <!--  <img src="imgUrl" alt=""> ①处 -->

      <img v-bind:src="imgUrl" alt="">  <!-- ②处 -->

      <!-- by the way v-bind的简写形式 -->

      <img :src="imgUrl" alt="">



       <br>

      <!-- 

        例子2：自动填充用户的登录信息
        需求：让data中与user相关的信息自动填充到input输入框内
        分析：问题1：之前有遇到类似的情况吗？
              嗯，之前如果要在input中获得用户的输入值可以使用value这个属性获得，当然如果需要在输入框中显示用户之前输入的数据也是使用value来完成的
              与之类似的还有placeholder占位符来达到提示用户的目的

              问题2：如何取出data里关于用户信息的数据呢？
              user.username   user.password

              状况：直接使用出现了与例1中相同的情况
              解决：在value前添加v-bind的指令即可

       -->

      用户名： <input type="text" v-bind:value="user.userName">
      密码：  <input type="password" v-bind:value="user.password">
      

       <br>

       <!-- 

        例子3：给div添加一个自定义的属性，用来保存某个数据
        需求: 新建一个div并在它的上面绑定一个自定义的属性doublePrice,使得doublePrice的值是原始值price的两倍
        分析：这里的关键点在于如何使doublePrice的值是原始值price的两倍，可以在取到price的值后*2即可
        解决：由插值语法区域可以执行表达式的运算，可知只要将doublePrice赋值号的右边变为插值语法区域即可
              故：在doublePrice前添加v-bind即可
        -->
        <div v-bind:doublePrice=" price * 2"></div>

        <br>

        <!-- 

          例子4：当遇到字符串拼接怎么办？
          需求：此处有一组图片需要展示，它们都有公共的网址部分，请使用 baseUrl+ "各自不同的地址" 形式，完成从data取出baseUrl并与各自独立部分拼接成一个可使用的完整地址
          分析：问题1：之前有遇到类似的情况吗？
                嗯，之前在js中字符串拼接很简单，只要加号运算符运算对象有一个是字符串，另一个就会隐式类型转换自动变为字符串，并且运算结果为二者拼接后的结果。
                状况：如何将img中插值语法区域的字符直接转化为字符串
                解决：方式一：直接在双引号之间需要转化为字符串的地方添加单引号即可
                     方式二: 使用模板字符串，值得说明的是不可以去掉双引号，一旦去掉则模板字符串语法将无法使用，此时它为html区域
                            使用方法js中如何使用这里就如何使用

         -->

         <img :src="baseUrl + '01.jpg'" alt="">
         <img :src=" `${baseUrl}02.jpg` " alt="">
         <img :src="baseUrl + '03.jpg'" alt="">



    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {

          imgUrl:"https://img1.baidu.com/it/u=1300668939,1504410366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=858",

          user:{

            userName: "豪仔",
            password: 123456

          },
          price:100,
          baseUrl: "https://img1.baidu.com/"
        };
      },
    });
  </script>


</html>